<template>
	<view class="help-container" style="position: relative;">
		
		<uni-nav-bar title="推广海报" left-icon="back" @clickLeft="$tab.back()" :border="false" :statusBar="true" :fixed="true" background-color="transparent" color="#FFF"></uni-nav-bar>

		<u-loading-page :loading="loading"
			image="https://file.fulewanjia.com/fulewanjia/profile/appImages/common/loading.gif"
			icon-size="100" loading-text=" "></u-loading-page>
			
		<image :src="path" style="width: 100%;" mode="widthFix"></image>
		
		
		<l-painter isCanvasToTempFilePath @success="imgsuccess" custom-style="position: fixed; left: 200%">
			<l-painter-view
				css="background: #d9d9d9;width: 100%;height:1624rpx;display: inline-block;backgroundImage: 'url(https://file.fulewanjia.com/fulewanjia/profile/appImages/share.png)'">
				<l-painter-image :src="avatar" css="width: 96rpx; height: 96rpx;borderradius:50%;position: absolute;top:30%;left: 50%;transform: translate(-50%);" />
				<l-painter-view
					css="position: absolute;top:38%;left: 49%;transform: translate(-44%);color:fff;display:inline-block;color:#000;">
					<l-painter-text text="邀请人:" />
					<l-painter-text :text="nickName" />
				</l-painter-view>
				<l-painter-view
					css="background: #FFD483; width: 520rpx; height: 520rpx;borderradius: 20rpx;padding: 24rpx;boxsizing: border-box;position: absolute;bottom:8%; left: 44%;transform: translate(-44%);">
					<l-painter-view css="width: 500rpx; height: 500rpx;padding: 10rpx;background: #FFF;boxsizing: border-box;borderradius: 20rpx">
						<l-painter-image :src="qrcode" css="width: 100%; height: 100%;" />
					</l-painter-view>
				</l-painter-view>
			</l-painter-view>
		</l-painter>
		<bottom-btn txt="下载保存至相册" @click="save"></bottom-btn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrcode: getApp().globalData.config.imagePrefix + this.$store.getters.userInfo.appQrCode,
				nickName: this.$store.getters.userInfo.nickName,
				avatar:this.$store.getters.userInfo.avatar,
				path: '',
				loading: false,
			}
		},
		onLoad(e) {
			var that = this
			this.loading = true
		},
		onShareAppMessage: function(res) {
			return {
				title: '分享推广',
				path: `/pages/subPack/qrcode/index`,
			}
		},
		methods: {
			imgsuccess(e) {
				this.path = e
				this.loading = false
			},
			save() {
				//#ifdef APP-PLUS || MP
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: function() {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						})
					}
				});
				//#endif
				//#ifdef H5
				uni.showModal({
					title: "提示",
					showCancel: false,
					content: "需要手动鼠标右键保存图片",
					confirmText: "知道了",
					success() {}
				})
				//#endif
			}
		}
	}
</script>

<style scoped>
	.sharebut {
		background-color: transparent !important;
		color: #fff !important;
		padding: 0 !important;
		border: none !important;
	}
	
	/deep/ .uni-navbar{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
</style>